<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> <Somnus:sitecfg name="sitetitle"/> </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="description" content=" <Somnus:sitecfg name="sitedescription"/> ">
<meta name="Keywords" content=" <Somnus:sitecfg name="sitekeywords"/> ">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/feiqi-ee5401a8e6.css">
<link rel="stylesheet" type="text/css" href="__PUBLIC__/home/css/newpay-bb7fcb5546.css">
<style>
.okdan{ padding:20px; color:#d80617;}
.okdan p{ color:#d80617; padding:5px;}
.sheng_icon img{ width:30%;}
</style>
</head>
<body style="background-color: #fff;">
    <!-- header -->
    <header class="mui-bar mui-bar-nav hnav">
		<a href="{:U('Info/chaxun')}" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 class="mui-title">查詢進度</h1>
	</header>
	<!-- header end-->
<div class="mui-content">
	

	<article class="mt10 jiekuan">
		<div class="sheng_icon" style="width:100%; padding:150px; text-align:center;">





                    <style type="text/css">
                    #c{
                        margin: 0 auto;
                        display: block;
                    }
                    #r{
                        display: block;
                        margin: 0 auto;
                    }
                    #r::before{
                        color: black;
                        content: attr(min);
                        padding-right: 10px;
                    }
                    #r::after{
                        color: black;
                        content: attr(max);
                        padding-left: 10px;
                    }


                    </style>



        <if condition="$jindu.jieguo">
            <canvas id="c"></canvas>
        <!--<if condition="$jindu.jieguo eq 1">-->
            <!--<input type="range" id="r" min="0" max="100" step="1" value="{$jindu.jindu}" style="display: none;">-->
            <!--<p>恭喜您，在本司委托申請融資境外貸款業務審核通過，請您在收到通知之日起7個工作日內務必到公司辦理簽核手續。</p>-->

            <!--<elseif condition="$jindu.jieguo eq 0" />-->
            <!--<input type="range" id="r" min="0" max="100" step="1" value="{$jindu.jindu}" style="display: none;">-->
            <!--<p style="text-align:center;">您的申請資料正在審核中。</p>-->

            <!--<elseif condition="$jindu.jieguo eq 2" />-->
            <!--<input type="range" id="r" min="0" max="100" step="1" value="{$jindu.jindu}" style="display: none;">-->
            <!--<p>很遺憾您在本司提交的申請未能通過，請您過段時間再次提交。</p>-->
        <!--</if>-->
            <input type="range" id="r" min="0" max="100" step="1" value="{$jindu.jindu}" style="display: none;">
            <div>{$jindu.content}</div>
        <else />
            <div class="flow" style="text-align:center; margin:20px;">
                <img src="__PUBLIC__/home/imgs/false.png" alt="" style="width:30%;">

                <div style="text-align:center; color:#ccc; margin-top:10px;">敬請等待通知！</div>
            </div>
        </if>


                    <script type="text/javascript">
                    var canvas = document.getElementById('c');
                    var ctx = canvas.getContext('2d');
                    var range = document.getElementById('r');

                    //range控件信息
                    var rangeValue = range.value;
                    var nowRange = 0;   //用于做一个临时的range

                    //画布属性
                    var mW = canvas.width = 250;
                    var mH = canvas.height = 250;
                    var lineWidth = 2;

                    //圆属性
                    var r = mH / 2; //圆心
                    var cR = r - 16 * lineWidth; //圆半径

                    //Sin 曲线属性
                    var sX = 0;
                    var sY = mH / 2;
                    var axisLength = mW; //轴长
                    var waveWidth = 0.015 ;   //波浪宽度,数越小越宽    
                    var waveHeight = 6; //波浪高度,数越大越高
                    var speed = 0.09; //波浪速度，数越大速度越快
                    var xOffset = 0; //波浪x偏移量

                    ctx.lineWidth = lineWidth;

                    //画圈函数
                    var IsdrawCircled = false;
                    var drawCircle = function(){
                        
                        ctx.beginPath();
                        ctx.strokeStyle = '#6afb76';
                        ctx.arc(r, r, cR+5, 0, 2 * Math.PI);
                        ctx.stroke();
                        ctx.beginPath();
                        ctx.arc(r, r, cR, 0, 2 * Math.PI);
                        ctx.clip();
                        
                    }

                    //画sin 曲线函数
                    var drawSin = function(xOffset){
                        ctx.save();
                        
                        var points=[];  //用于存放绘制Sin曲线的点
                        
                        ctx.beginPath();
                        //在整个轴长上取点
                        for(var x = sX; x < sX + axisLength; x += 20 / axisLength){
                            //此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
                            var y = -Math.sin((sX + x) * waveWidth + xOffset);
                            
                            var dY = mH * (1 - nowRange / 100 );
                            
                            points.push([x, dY + y * waveHeight]);
                            ctx.lineTo(x, dY + y * waveHeight);     
                        }
                        
                        //封闭路径
                        ctx.lineTo(axisLength, mH);
                        ctx.lineTo(sX, mH);
                        ctx.lineTo(points[0][0],points[0][1]);
                        ctx.fillStyle = '#6afb76';
                        ctx.fill();
                        
                        ctx.restore();
                    };

                    //写百分比文本函数
                    var drawText = function(){
                        ctx.save();
                        
                        var size = 0.4*cR;
                        ctx.font = size + 'px Microsoft Yahei';
                        ctx.textAlign = 'center';
                        ctx.fillStyle = "#007b11";
                        ctx.fillText(~~nowRange + '%', r, r + size / 2);
                        
                        ctx.restore();
                    };

                    var render = function(){
                        ctx.clearRect(0, 0, mW, mH);
                        
                        rangeValue = range.value;
                        
                        if(IsdrawCircled == false){
                            drawCircle();   
                        }
                        
                        if(nowRange <= rangeValue){
                            var tmp = 1;
                            nowRange += tmp;
                        }
                        
                        if(nowRange > rangeValue){
                            var tmp = 1;
                            nowRange -= tmp;
                        }
                        
                        drawSin(xOffset);
                        drawText(); 
                        
                        xOffset += speed;
                        requestAnimationFrame(render);
                    }

                    render();

                    </script>
		</div>
	</article>

</div>
<div style="display: none;">
	<Somnus:sitecfg name="sitecode"/>
</div>
<!--
<include file="Public/footer" />
-->
</body>
</html>